<template>
  <div>
    <div class="home_header">
      <p @click="login">{{username}}</p>
      <p>Logout</p>
      <i class="el-icon-shopping-cart-2" @click="goto"></i>
    </div>
    <div class="home_nav">
      <el-dropdown @command="cut">
        <span class="el-dropdown-link">
          Default
          <i class="el-icon-arrow-down el-icon--right"></i>
        </span>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item
            v-for="(item, index) in nav"
            :key="index"
            :command="(item)"
          >{{item.title}}</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
      <div @click="sort">
        Price
        <i class="el-icon-top" v-if="!picShow"></i>
        <i class="el-icon-bottom" v-if="picShow"></i>
      </div>
    </div>
    <div class="home_content">
      <el-row>
        <el-col :xs="0" :sm="6" :md="6" :lg="6" :xl="6">
          <div class="home_content_left">
            <div
              class="home_content_left_nav"
              v-for="(item, index) in nav"
              :key="index"
              @click="cut(item,index)"
              :class="{'color':selectIndex==index}"
            >{{item.title}}</div>
          </div>
        </el-col>
        <el-col :xs="24" :sm="18" :md="18" :lg="18" :xl="18">
          <div class="home_content_right" ref="contentBox">
            <div class="home_content_right_wrapper">
              <el-row :gutter="10">
                <el-col :xs="24" :sm="8" :md="6" v-for="(item, index) in showList" :key="index">
                  <div class="grid-content">
                    <img :src="item.productImage" alt width="100%" />
                    <div class="msg">
                      <h4>{{item.productName}}</h4>
                      <p>￥{{item.salePrice}}</p>
                    </div>

                    <el-popconfirm
                      confirmButtonText="查看购物车"
                      cancelButtonText="继续加购"
                      icon="el-icon-circle-check"
                      iconColor="orange"
                      title="加入购物车成功"
                      @onConfirm="goto"
                    >
                     <el-button slot="reference" type="danger" plain @click="add(item)">加入购物车</el-button>
                    </el-popconfirm>
                   
                  </div>
                </el-col>
              </el-row>
            </div>
          </div>
          <div class="loading" v-if="loadShow">
            <img src="https://upfile.asqql.com/2009pasdfasdfic2009s305985-ts/2019-7/20197222241997732.gif" alt="" >
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      nav: [],
      list: [],
      showList: [],
      selectIndex: 0,
      picShow: false,
      loadShow:false,
      page:1,
      username:''
    };
  },
  mounted() {
    var user=localStorage.user
    if(user){
      user=JSON.parse(user)
      this.username=user[0].username
    }else{
      this.username='请登录'
    }
    this.$axios.get("/data.json").then((res) => {
      // console.log(res.data.result);
      this.nav = res.data.result.slider;
      this.list = res.data.result.list;
      // console.log(this.nav);
      // console.log(this.list);
      this.showList = this.list;
      
    });
    this.$refs.contentBox.addEventListener('scroll', (event)=> {
    var top=event.target.clientHeight //元素高度
    var allTop=event.target.scrollHeight //滚动所有长度
    var contTop=event.target.scrollTop //滚动距离
    // console.log(top+'==');
    // console.log(allTop+'===');
    // console.log(contTop+'====');
  
    if(allTop-contTop-top<0){
      this.loadShow=true;
        this.page++
      if(this.page>3){
        this.loadShow=false
        return
      }
    
       this.$axios.get(`/data${this.page}.json`).then((res) => {
        setTimeout(() => {
          // console.log(res.data.result.list);
          this.showList=[...this.showList,...res.data.result.list]
         this.loadShow=false
         
        }, 2000);
       })
     
    }
    })
  },
  methods: {
    login(){
      if(this.username=='请登录'){
        this.$router.push({
          path:'/login'
        })
      }
    },
    cut(msg, index) {
      // console.log(msg);
      this.selectIndex = index;
      this.showList = [];
      if (msg.title == "All") {
        this.showList = this.list;
      } else {
        this.list.map((item) => {
          if (item.salePrice >= msg.low && item.salePrice <= msg.hight) {
            // console.log(item);
            this.showList.push(item);
          }
        });
      }
    },
    sort() {
      this.picShow = !this.picShow;
      if (this.picShow == false) {
        this.showList.sort((a, b) => {
          return a.salePrice - b.salePrice;
        });
      } else {
        this.showList.sort((a, b) => {
          return b.salePrice - a.salePrice;
        });
      }
    },
    add(cont) {
      // console.log(cont);
     if(localStorage.user){
        this.$store.dispatch("add", cont);
     }else{
       this.$router.push({path:'/login'})
     }
    },
    goto(){
      this.$router.push({
        path:'/cart'
      })
    }
  },
};
</script>

<style lang="scss" scoped>
.loading{
  width: 100%;
  height: 70px;
  display: flex;
  justify-content: center;
  img{
    height: 100%;
  }
}
.home_header {
  width: 100%;
  height: 8vh;
  font-size: 16xp;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  P {
    margin: 0px 20px;
  }
  i {
    font-size: 30px;
    margin: 0px 50px 0px 20px;
    cursor: pointer;
  }
  i:hover{
    color: orange;
  }
}
.home_nav {
  width: 100%;
  height: 6vh;
  background: #f0f0f0;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  .el-dropdown-menu,
  div {
    margin: 0 30px;
    cursor: pointer;
  }
  div:hover {
    color: orange;
  }
  .el-dropdown {
    display: none;
  }
}
.home_content {
  width: 100%;
  height: 86vh;
  .home_content_left {
    height: 86vh;
    .home_content_left_nav {
      margin: 0px 5px 10px;
      padding: 5px 10px;
      cursor: pointer;
    }
  }
  .home_content_right {
    height: 86vh;
    overflow: scroll;
    overflow-x: hidden;
    overflow-y: scroll;
    h4 {
      margin: 10px 0px;
    }
    P {
      color: firebrick;
      margin-bottom: 10px;
    }
    .el-row {
      margin: 10px !important;
      .el-col {
        margin: 10px;
      }
    }
  }
}
.grid-content{
  padding: 5px;
  text-align: center;
  border: 1px solid gray;
}
.grid-content:hover {
  border: 2px solid skyblue;
  box-shadow: 0px 0px 3px skyblue;
}
@media screen and (max-width: 768px) {
  .home_nav {
    display: flex;
    justify-content: space-between;
    .el-dropdown {
      display: block;
      font-weight: 600;
    }
  }
  .home_content_right {
    .el-col {
      .grid-content {
        height: 15vh;
        display: flex;
        justify-content: space-between;
        align-items: flex-end;
        margin: 10px 0px;
        img {
          width: 16%;
        }
        .el-button {
          height: 5vh;
        }
      }
    }
  }
  .grid-content:hover {
    border: none !important;
    box-shadow: none !important;
  }
}
.color {
  border-left: 3px solid red;
  color: red;
}

</style>